<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
          <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, target-densityDpi=device-dpi" />
          <!-- 微软的老式浏览器 -->
          <meta name="MobileOptimized" content="320">
          <!-- 启用360浏览器的极速模式(webkit) – -->
          <meta name="renderer" content="webkit">
          <!-- 避免IE使用兼容模式 -->
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
          <meta name="HandheldFriendly" content="true">
          <!-- uc强制竖屏 -->
          <meta name="screen-orientation" content="portrait">
          <!-- QQ强制竖屏 -->
          <meta name="x5-orientation" content="portrait">
          <!-- UC强制全屏 -->
          <meta name="full-screen" content="yes">
          <!-- QQ强制全屏 -->
          <meta name="x5-fullscreen" content="true">
          <!-- UC应用模式 若开启长按无法复制链接-->
          <!--meta name="browsermode" content="application"-->
          <!-- QQ应用模式 -->
          <meta name="x5-page-mode" content="app">
          <!--网站开启对web app程序的支持-->
          <meta name="apple-touch-fullscreen" content="yes">
          <!--在web app应用下状态条（屏幕顶部条）的颜色-->
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <!-- windows phone 点击无高光 -->
          <meta name="msapplication-tap-highlight" content="no">
          <!--移动web页面是否自动探测电话号码-->
          <!--<meta http-equiv="x-rim-auto-match" content="none">-->
          <!--手机号码显示为拨号链接-->
          <meta name="format-detection" content="telephone=no">
          <meta http-equiv="Cache-Control" content="max-age=300" />
          <meta http-equiv="Expires" content="300" />
          <title>投哪网-圈子详情</title>
          <link rel="stylesheet" href="../css/reset.css">
          <link rel="stylesheet" href="../css/set_pack_new.css">
          <link rel="stylesheet" href="../assets/layer_mobile/need/layer.css">
          <script src="../assets/layer_mobile/layer.js"></script>
          <script src="../js/jquery.min.js"></script>
          <script src="../js/common.js"></script>
    </head>
    <body>
      <div class="container">
        <div class="content">
          <ul>
            <li>
              <div class="set_red">
                <div class="title clearfix">
                  <div class="title_left">
                    <h4>方案一</h4>
                  </div>
                  <div class="title_right">
                    <p>设置规则</p>
                  </div>
                </div>
                <div class="money">
                  <div class="pupil_bag">
                    <img src="../images/pupil-bag.png" height="34" width="26">
                    <span>徒弟红包</span>
                  </div>
                  <div class="pupil_set">
                    <!-- setAll属性为总金额 -->
                    <input type="text" oninput="pack_match(this)" attr="58" placeholder="600" value="600" setAll="800">
                    <span>元</span>
                  </div>
                  <div class="master_mon">
                    <p>师父红包<span>128</span>元</p>
                  </div>
                  <div class="invest_detail">
                    <ul>
                      <li>
                        <h3>10.0%</h3>
                        <p>往期年化</p>
                      </li>
                      <li>
                        <h4>30天</h4>
                        <p>投资期限</p>
                      </li>
                      <li>
                        <h4>100000元</h4>
                        <p>起投金额</p>
                      </li>
                    </ul>
                  </div>
                  <div class="pack_red">
                    包红包
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="set_red">
                <div class="title clearfix">
                  <div class="title_left">
                    <h4>方案二</h4>
                  </div>
                </div>
                <div class="money">
                  <div class="pupil_bag">
                    <img src="../images/pupil-bag.png" height="34" width="26">
                    <span>徒弟红包</span>
                  </div>
                  <div class="pupil_set">
                  <!-- setAll属性为总金额 -->
                    <input type="text" oninput="pack_match(this)" attr="58" placeholder="600" value="600" setAll="800">
                    <span>元</span>
                  </div>
                  <div class="master_mon">
                    <p>师父红包<span>128</span>元</p>
                  </div>
                  <div class="invest_detail">
                    <ul>
                      <li>
                        <h3>10.0%</h3>
                        <p>往期年化</p>
                      </li>
                      <li>
                        <h4>30天</h4>
                        <p>投资期限</p>
                      </li>
                      <li>
                        <h4>100000元</h4>
                        <p>起投金额</p>
                      </li>
                    </ul>
                  </div>
                  <div class="pack_red">
                    包红包
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="set_red">
                <div class="title clearfix">
                  <div class="title_left">
                    <h4>方案三</h4>
                  </div>
                </div>
                <div class="money">
                  <div class="pupil_bag">
                    <img src="../images/pupil-bag.png" height="34" width="26">
                    <span>徒弟红包</span>
                  </div>
                  <div class="pupil_set">
                    <input type="text" oninput="pack_match(this)" attr="58" placeholder="600" value="600">
                    <span>元</span>
                  </div>
                  <div class="master_mon">
                    <p>师父红包<span>128</span>元</p>
                  </div>
                  <div class="invest_detail">
                    <ul>
                      <li>
                        <h3>10.0%</h3>
                        <p>往期年化</p>
                      </li>
                      <li>
                        <h4>30天</h4>
                        <p>投资期限</p>
                      </li>
                      <li>
                        <h4>100000元</h4>
                        <p>起投金额</p>
                      </li>
                    </ul>
                  </div>
                  <div class="pack_red">
                    包红包
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="set_rules">
        <div class="rules_detail">
          <h4>设置规则</h4>
          <p>1、红包金额可在允许区间内任性设置。</p>
          <p>2、最低设置金额为1元。</p>  
          <p>3、设置成功并分享给徒弟投资之后，徒弟将收到您设置的现金红包。</p>
          <div class="get_rules">
            知道了
          </div>
        </div>
      </div>
      <div class="set_pack_next">
        <div class="next_detail">
          <div class="next_background"></div>
          <div class="set_pack_mon">
            <p class="pupil_get">徒弟投资之后将收到600元红包，</p>
            <p class="master_get">您可以获得128元红包</p>
          </div>
          <div class="set_pack_btn">
            <div class="set_pack_return">继续设置红包</div>
            <div class="set_pack_sure">确认分享该投资红包</div>
          </div>
        </div>
      </div>
      <script type="text/javascript">
        $('.title_right').click(function() {
          $('.set_rules').css('display','block')
        });
        $('.set_rules').click(function() {
          $('.set_rules').css('display','none')
        });
        $('.get_rules').click(function() {
          $('.set_rules').css('display','none')
        });
        function pack_match(obj){
        obj.value=obj.value.replace(/[^\d]/g,'');
        obj.value=obj.value.substr(0,3);
        var count =  parseInt($(obj).attr('setAll'));
        var td_pack =  parseInt($(obj).val())
        var master_pack = parseInt(count-td_pack)
        if(isNaN(master_pack)){
          master_pack=0
        };
        $(obj).parent('div').next('.master_mon').find('span').text(master_pack)
      }
      $('.pupil_set input').focus(function() {
        $(this).val('');console.log($(this).val(''))
      });
      $('.pupil_set input').keyup(function() {        
        var count =  parseInt($(this).attr('setAll'));
        if($(this).val() > count){
          layer.open({
                content: '请输入正确的金额！'
                ,skin: 'msg'
                ,time: 2//2秒后自动关闭
              });
          $(this).parent('div').next('.master_mon').find('span').text(0)
          $(this).val(count);
        }
      });
        $('.pack_red').each(function(index,el){
          $(el).click(function(){
            var pupil = $(el).parent('div').children('.pupil_set').children('input').val();
            var master = $(el).parent('div').children('.master_mon').children('p').children('span').text();
            if(pupil>=1){
              $('.pupil_get').text('徒弟投资之后将收到'+pupil+'元红包');
            $('.master_get').text('您可以获得'+master+'元红包')
            $('.set_pack_next').css('display','block');
          }else{
            layer.open({
                content: '最低金额为1元！'
                ,skin: 'msg'
                ,time: 2//2秒后自动关闭
              });
          }
            
          })

        });
        $('.set_pack_return').click(function(){
          $('.set_pack_next').css('display','none');
        });
        $('.set_pack_return').click(function(){
          $('.set_pack_next').css('display','none');
        });
      </script>
    </body>
</html>